import React, { Component } from 'react'
import logo from "../../assets/img/pic_logo_white 2.png"
import "./Home.less"
import { Card, Tabs } from "antd-mobile"
import { LocationFill, RightOutline } from "antd-mobile-icons"
import { reqgetcountdown, reqgetgroupon, reqgetnew, reqgetseckill, reqShouYe } from '../../http/api'
import shopmin from "../../assets/img/home_icon_gouwuche@3x.png"
import { MyContext } from '../../App'
import detail from '../detail/detail'


export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      //初始化新人专享
      xinren: [],
      //万人团
      wanrentuan: [],
      //倒计时
      daojishi: [],
      //秒杀
      miaosha: [],
      //商品信息首页
      info: [],
      arr: ["one", "two", "three", "four"],
      n: 0

    }
  }

  render() {
    let { xinren, wanrentuan, daojishi, miaosha, arr, info, n } = this.state
    return (
      <div className='home'>
        <header>
          <img src={logo} alt="" />
          <div>
            <input type="text" placeholder='请输入' />
            <button> 搜索 </button>
          </div>
          <LocationFill color='#fff' fontSize={20} />
        </header>
        <div className='con'>
          <div>
            <span className='span1'>新人专享</span>
            <div>
              <span>05</span>:<span>42</span>:<span>47</span>
            </div>
            <div>
              <span className='span2'>查看全部<RightOutline /></span>
            </div>
          </div>
          {/* 新人福利 */}
          <div>
            <div>
              <span>1重礼</span>
              <span>信任特价商品专区</span>
              <span>（限量供应，先到先得）</span>
            </div>
            <div>
              <MyContext.Consumer>
                {({ $pre }) => {
                  return (
                    xinren.map((item) => {
                      return (
                        <div key={item.id} onClick={() => this.props.history.push("/detail/id=" + item.id+"&type=1")}>
                          <img src={$pre + item.img} />
                          <div>
                            <div>
                              <span>{item.price}</span>
                              <span>{item.market_price}</span>
                            </div>
                            <img src={shopmin} width={25} height={25} />
                          </div>
                          <span>{item.goodsname}</span>
                        </div>
                      )
                    })
                  )
                }}
              </MyContext.Consumer>
            </div>
          </div>
          {/* 万人团 */}
          <div>
            <div>
              <span>万人团</span>
              <span>信任特价商品专区</span>
              <span>（限量供应，先到先得）</span>
            </div>
            <div>
              <MyContext.Consumer>
                {({ $pre }) => {
                  return (
                    wanrentuan.map((item) => {
                      return (
                        <div key={item.id} onClick={() => this.props.history.push("/detail/id=" + item.id+"&type=1")}>
                          <img src={$pre + item.img} />
                          <div>
                            <div>
                              <span>{item.price}</span>
                              <span>{item.market_price}</span>
                            </div>
                            <img src={shopmin} width={25} height={25} />
                          </div>
                          <span>{item.goodsname}</span>
                        </div>
                      )
                    })
                  )
                }}
              </MyContext.Consumer>
            </div>
          </div>
          {/* 倒计时 */}
          <div>
            <h3>倒计时数据</h3>
            <div>{daojishi ? <div>{daojishi}</div> : <div>暂无数据</div>}</div>
          </div>
          {/* 秒杀 */}
          <div>
            <div>
              <span>秒杀</span>
              <span>信任特价商品专区</span>
              <span>（限量供应，先到先得）</span>
            </div>
            <div>
              <MyContext.Consumer>
                {({ $pre }) => {
                  return (
                    miaosha.map((item) => {
                      return (
                        <div key={item.id} onClick={() => this.props.history.push("/detail/id=" + item.id+"&type=1")}>
                          <img src={$pre + item.img} />
                          <div>
                            <div>
                              <span>{item.price}</span>
                              <span>{item.market_price}</span>
                            </div>
                            <img src={shopmin} width={25} height={25} />
                          </div>
                          <span>{item.goodsname}</span>
                        </div>
                      )
                    })
                  )
                }}
              </MyContext.Consumer>
            </div>
          </div>
          {/* 获取商品信息首页 */}
          <div className='arr'>
            <Tabs onChange={(e) => { this.setState({ n: e }) }}>
              {arr.map((item, index) => {
                return (
                  <Tabs.Tab title={item} key={index} >
                    {/* 卡片内容 */}
                    {info.length > 0 ? (
                      <MyContext.Consumer>
                        {({ $pre }) => {
                          return (
                            <div>
                              {info[n].content.map((i) => {
                                return (
                                  <Card title={i.goodsname} key={i.id} onClick={(e) => { console.log(e); }}>
                                    <img src={$pre + i.img} alt="" width={100} />
                                    <div>
                                      <p>{i.description}</p>
                                      <p>价格：{i.price}</p>
                                      <p>原价：{i.market_price}</p>
                                    </div>
                                    <button onClick={()=>{this.props.history.push("/detail/id=" + item.id+"&type=1")}}>加入购物车</button>
                                  </Card>
                                )
                              })}
                            </div>
                          )
                        }}
                      </MyContext.Consumer>
                    ) : <Card title='' onClick={(e) => { console.log(e); }}>
                      暂无数据
                    </Card>}
                  </Tabs.Tab>
                )
              })}
              {/* <Tabs.Tab title='蔬菜' key='vegetables'>
                  西红柿
                </Tabs.Tab>
                <Tabs.Tab title='动物' key='animals'>
                  蚂蚁
                </Tabs.Tab> */}
            </Tabs>
            <div></div>
          </div>

        </div>
      </div >
    )
  }
  //渲染完成
  componentDidMount() {
    //请求新人
    reqgetnew().then(res => {
      if (res.data.code == 200) {
        this.setState({
          xinren: res.data.list
        })
      }
    })
    //万人团
    reqgetgroupon().then(res => {
      if (res.data.code == 200) {
        this.setState({
          wanrentuan: res.data.list
        })
      }
    })
    //倒计时
    reqgetcountdown().then(res => {
      if (res.data.code == 200) {
        this.setState({
          daojishi: res.data.list
        })
      }
    })
    //秒杀
    reqgetseckill().then(res => {
      if (res.data.code == 200) {
        this.setState({
          miaosha: res.data.list
        })
      }
    })
    //获取商品信息首页
    reqShouYe().then(res => {
      if (res.data.code == 200) {
        this.setState({
          info: res.data.list
        })
        console.log(res);
      }
    })
  }

}
